vue
复制代码
	<!-- CloudVillagePage.vue -->  

	<template>  

	  <div class="cloud-village">  

	    <header>  

	      <h1>网易云音乐 云村</h1>  

	      <nav>  

	        <!-- 假设的导航链接，实际项目中可能会使用Vue Router -->  

	        <ul>  


	          <li><a href="/discover">发现</a></li>  

	          <li class="active"><a href="#">云村</a></li>  


	        </ul>  

	      </nav>  

	    </header>  

	    <main>  

	      <section class="dynamic-feed">  

	        <h2>动态</h2>  

	        <ul>  

	          <li v-for="post in posts" :key="post.id">  

	            <img :src="post.avatar" alt="用户头像">  

	            <div class="content">  

	              <h3>{{ post.user }}</h3>  

	              <p>{{ post.content }}</p>  

	              <small>{{ post.date }}</small>  

	            </div>  

	          </li>  

	        </ul>  

	      </section>  

	      <section class="hot-topics">  

	        <h2>热门话题</h2>  

	        <ul>  

	          <li v-for="topic in topics" :key="topic.id">  

	            <a :href="topic.url">{{ topic.name }}</a>  

	            <span class="count">{{ topic.postsCount }} 讨论</span>  

	          </li>  

	        </ul>  

	      </section>  

	    </main>  

	  </div>  

	</template>  

	  

	<script setup>  

	import { ref } from 'vue';  

	  

	// 假设的动态数据  

	const posts = ref([  

	  { id: 1, user: '瓜嘉鱼', avatar: 'https://img.zcool.cn/community/018a0a6096496c11013e3b7ddfb0b0.png@1280w_1l_2o_100sh.png', content: '分享了一首好歌...', date: '刚刚' },  

	  { id: 2, user: '卡查宏', avatar: 'https://img.meituan.net/avatar/22fcb915a4f3afa68fad84fba39b3db4130816.jpg', content: '今天心情不错！', date: '1小时前' },  

	  // 更多动态...  

	]);  

	  

	// 假设的热门话题数据  

	const topics = ref([  

	  { id: 1, name: '音乐与生活的关系', url: '#', postsCount: 123 },  

	  { id: 2, name: '你最喜欢的歌手是谁？', url: '#', postsCount: 456 },  

	  // 更多话题...  

	]);  

	</script>  

	  

	<style scoped>  

	  

	.dynamic-feed, .hot-topics {  

	  margin-top: 20px;  

	}  

	  

	.dynamic-feed img, .hot-topics img {  

	  /* 如果这里有用户头像的样式，可以在这里定义 */  

	  width: 50px;  

	  height: 50px;  

	  border-radius: 50%;  

	  vertical-align: middle;  

	  margin-right: 10px;  

	}  

	  

	.content small {  

	  /* 动态日期的小样式 */  

	  color: #999;  

	  font-size: 0.8em;  

	}  

	  

	.hot-topics .count {  

	  /* 热门话题的讨论数样式 */  

	  color: #ff5722;  

	  margin-left: 10px;  

	}  

	</style>